<template>
  <div class="conianer" style="width: 100%; position: relative;">
    <div class="header">
      <div class="title">
        <span>欢</span>
        <span>迎</span>
        <span>来</span>
        <span>到</span>
        <span>社</span>
        <span>区</span>
        <span>页</span>
      </div>        
      <Banner :database="BannerBase"></Banner>
    </div>
    <div class="content">
      <div class="leftcontent">
        <div class="title">
          <span>文章列表</span>
          <span style="margin-right: 20px;">
            <a href="/layout/addarticle" style="color:hotpink;">发表文章</a>
          </span>
        </div>
        <div>
          <ArticleInfo class="articleinfo" @checkdetial="checkdetial" :dataBase="dataBase"></ArticleInfo>
        </div>
      </div>

      <div class="rightcontent">
        <div style="width: 100%;">
          <PersonInfo class="personinfo" style="margin-top: 20px;"></PersonInfo>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PersonInfo from '@/components/Front/PersonInfo/index.vue'
import Banner from '@/components/Front/Banner/Banner.vue'
import ArticleInfo from '@/components/Article/index.vue'
import { mapState,mapMutations} from 'vuex'
export default {
  components:{
    Banner,
    PersonInfo,
    ArticleInfo
  },
  data(){
    return {
      dataBase:[],
      BannerBase:[]
    }
  },
  methods:{
    ...mapMutations('editfo',['changeDatas']),
    checkdetial(val){
      this.changeDatas(val)
      this.$router.push('/layout/articldetl')
    },
    async getAll(){
      const res = await this.$axios.get("/article/GetAll")
      this.dataBase = res
      console.log(res)
    },
    async getBanner(){
      const res = await this.$axios.get(`/banner/getBannerPosition/${0}`)
      this.BannerBase = res
    }
  },

  created(){
    this.getAll()
    this.getBanner()
  }
}
</script>

<style scoped lang="less">
.header{
  position: relative;
  width: 100%;
  background-color: antiquewhite;
  .title{
    position: absolute;
    z-index: 120;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: aliceblue;
    font-size: 60px;
    span{
      top:40px;
      position: relative;
      animation: loading 0.3s ease 0s infinite alternate;
      text-shadow:  0 1px 0  #CCC,
                    0 2px 0 #CCC,
                    0 3px 0 #CCC,
                    0 4px 0 #CCC,
                    0 5px 0 #CCC,
                    0 6px 0 #CCC,
                    0 7px 0 #CCC,
                    0 8px 0 #CCC,
                    0 9px 0 #CCC,
                    0 10px 10px rgba(0, 0, 0, 0.5);
    }
    span:nth-child(2) { 
      animation-delay: 0.1s; 
    }
    span:nth-child(3) { 
      animation-delay: 0.2s; 
    }
    span:nth-child(4) { 
      animation-delay: 0.3s; 
    }
    span:nth-child(5) { 
      animation-delay: 0.4s; 
    }
    span:nth-child(6) { 
      animation-delay: 0.5s; 
    }
    span:nth-child(7) { 
      animation-delay: 0.6s; 
    }
  }
}
.conianer .content{
  margin-top: 20px;
  padding: 0 100px;
  display: flex;
  justify-content: space-between;

.leftcontent{
    height:100%;
    background-color:#fff;
    .title{
      display: flex;
      justify-content: space-between;
      height: 50px;
      width: 100%;
      border-bottom: 1px solid black;
      margin-bottom: 20px;
      span{
        margin-left: 20px;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
      }
    }
    .maincont{
      background-color: #eee;
      padding: 10px;
      display: flex;
      margin-bottom: 20px;
      height: 300px;
      border: 1px solid black;
      .lefc{
        width: 420px;
        height: 300px;
        margin-right: 20px;
        overflow: hidden;
        img:hover{
          transition: all 0.3s;
          transform: scale(1.4);
        }
      }
      .righc .midmain{
        padding: 20px;
        height: 80px;
        background-color: transparent;
        box-sizing: border-box;
        span{
          word-break:normal; 
          width:auto; 
          display:block; 
          white-space:pre-wrap;
          word-wrap : break-word ;
          overflow: hidden ;
        }
      }
      .righc .userinfo{
        height: 60px;
        display: flex;
        margin-top: 50px;
        .avatar{
          height: 60px;
          width: 60px;
          border-radius: 50%;
        }
        .inform span{
          width: 200px;
          margin-top: 30px;
          margin-left: 40px;
        }
        .detial{
          margin-top: 20px;
          margin-left: 60px;
        }
      }
    }
}
  .rightcontent{
    height: 100%;;
    margin-left: 20px;
  }
}

@keyframes loading {  /* 定义动画*/
    100% {
      top: 5px;  /*字符上下浮动*/
      text-shadow: 0 1px 0 #CCC,
      0 2px 0 #CCC,
      0 3px 0 #CCC,
      0 4px 0 #CCC,
      0 5px 0 #CCC,
      0 6px 0 #CCC,
      0 7px 0 #CCC,
      0 8px 0 #CCC,
      0 9px 0 #CCC,
      0 50px 25px rgba(0, 0, 0, 0.3);     
  }
}

@media screen and (min-width: 1440px){
  .rightcontent{
    display: block;
  }
}
@media screen and (max-width: 1439px){

  .rightcontent{
    display: none;
  }
  .leftcontent{
    width: 100%;
  }
}

</style>